<template>
  <s-layout class="set-wrap" title="" :bgStyle="{ color: '#f7f7f7' }">
    <!-- <s-empty v-if="state.list.length === 0 && !state.loading" text="暂无常见问题" icon="/static/collect-empty.png" /> -->
    <view class="flex flex-col px-4 pb-0 bg-white">
      <u-alert type="error" title="等待实名认证审核" v-if="state.status === 0"></u-alert>
      <u-alert type="error" title="实名认证已通过" v-if="state.status === 1"></u-alert>
      <u-alert type="error" title="实名认证审核失败" :description="state.msg" v-if="state.status === 2"></u-alert>
      <view class="flex overflow-hidden flex-col bg-white rounded-lg">
        <view class="flex gap-7 items-center py-2">
          <view class="text-[15px] text-[#333333] flex-none w-[3.125rem]"> 姓名 </view>
          <uni-easyinput
            v-model="state.name"
            type="text"
            placeholder="请填写姓名"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </view>
        <u-line></u-line>
        <view class="flex gap-7 items-center py-2">
          <view class="text-[15px] text-[#333333] flex-none w-[3.125rem]"> 身份证 </view>
          <uni-easyinput
            v-model="state.idcard"
            type="text"
            placeholder="请填写身份证"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </view>
        <u-line></u-line>
        <view class="flex gap-7 items-center py-2">
          <view class="text-[15px] text-[#333333] flex-none w-[3.125rem]"> 手机号 </view>
          <uni-easyinput
            v-model="state.mobile"
            type="text"
            placeholder="请填写手机号"
            :inputBorder="false"
            placeholderStyle="color:#BBBBBB;font-size:30rpx;font-weight:400;line-height:normal"
          />
        </view>
        <u-line></u-line>
        <view class="flex flex-col gap-4 items-start py-4">
          <view class="text-[15px] text-[#333333] flex-none"> 身份证正面 </view>
          <s-uploader
            v-model:url="state.idcarda_image"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          >
          </s-uploader>
        </view>
        <u-line></u-line>

        <view class="flex flex-col gap-4 items-start py-4">
          <view class="text-[15px] text-[#333333] flex-none"> 身份证反面 </view>
          <s-uploader
            v-model:url="state.idcardb_image"
            fileMediatype="image"
            limit="1"
            mode="grid"
            :imageStyles="{ width: '168rpx', height: '168rpx' }"
          >
          </s-uploader>
        </view>
      </view>
    </view>

    <view class="py-5"></view>
    <view class="fixed right-0 bottom-0 left-0 p-4 bg-white" v-if="state.status !== 1">
      <view class="overflow-hidden py-3 w-full rounded-lg bg-[#0788C8] grid place-items-center" @click="certification">
        <view class="font-medium text-[16px] text-[#FFFFFF]">认证</view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { object } from '@/uni_modules/uview-plus/libs/function/test';
  import sheep from '@/sheep';

  const state = ref({
    list: [],
    loading: true,

    name: '', // 姓名
    idcard: '', // 身份证号
    mobile: '', // 联系方式
    idcarda_image: '', // 身份证正面
    idcardb_image: '', // 身份证反面
    needToEdit: false,
    status: -1,
    msg: '',
  });

  authInfo();
  function authInfo(params) {
    sheep.$api.yy.authInfo().then((res) => {
      if (res.data && Object.keys(res.data).length > 0) {
        state.value.needToEdit = true;
        state.value.status = res.data.status;
        state.value.msg = res.data.msg;

        //----------
        state.value.name = res.data.name;
        state.value.idcard = res.data.idcard;
        state.value.mobile = res.data.mobile;
        state.value.idcarda_image = res.data.idcarda_image;
        state.value.idcardb_image = res.data.idcardb_image;
      } else {
        state.value.needToEdit = false;
      }
    });
  }

  function certification() {
    //state.status 0 1 2
    if (state.value.status === 0 || state.value.status === 1) {
      uni.showToast({
        title: state.value.status === 0 ? '请等待审核通过' : '您已通过认证',
        icon: 'none',
      });
      return;
    }

    let obj = {
      name: state.value.name, // 姓名
      idcard: state.value.idcard, // 身份证号
      mobile: state.value.mobile, // 联系方式
      idcarda_image: state.value.idcarda_image, // 身份证正面
      idcardb_image: state.value.idcardb_image, // 身份证反面
    };
    sheep.$api.yy.userAuth(obj).then((res) => {
      if (res.code === 1) {
        uni.showToast({
          title: '认证成功',
          icon: 'success',
        });

        state.value.name = '';
        state.value.idcard = '';
        state.value.mobile = '';
        state.value.idcarda_image = '';
        state.value.idcardb_image = '';
        // 返回
        uni.navigateBack({
          delta: 1,
        });
      }
    });
  }
</script>

<style lang="scss" scoped>
  :deep() {
    .uni-forms-item__label .label-text {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
    }

    .uni-easyinput__content-input {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      padding-left: 0 !important;
    }

    .uni-easyinput__content-textarea {
      font-size: 28rpx !important;
      color: #333333 !important;
      line-height: normal !important;
      margin-top: 8rpx !important;
    }

    .uni-icons {
      font-size: 40rpx !important;
    }

    .is-textarea-icon {
      margin-top: 22rpx;
    }

    .is-disabled {
      color: #333333;
    }
  }
</style>
